<div id="editor" nz-row>
    <div nz-col [nzSpan]="22" [nzLg]="22">
        缩放
        <nz-select style="width: 80px;" [(ngModel)]="selectScale" (nzOpenChange)="scale($event)">
            <nz-option
                *ngFor="let option of scaleOption"
                [nzLabel]="option.label"
                [nzValue]="option">
            </nz-option>
        </nz-select>
        <span [appMargin]="10" class="editTool">
            <a (click)="finalSave()" title="保存">
                <i class="icon icon-save"></i>
            </a>
            <a (click)="preview()" title="预览">
                <i class="icon icon-预览-1"></i>
            </a>
            <a (click)="sort('top')" title="置顶">
                <i class="icon icon-顶置"></i>
            </a>
            <a (click)="sort('bottom')" title="置底">
                <i class="icon icon-顶置 rotate"></i>
            </a>
            <a (click)="sort(1)" title="上移一层">
                <i class="icon icon-上移一层"></i>
            </a>
            <a (click)="sort(-1)" title="下移一层">
                <i class="icon icon-上移一层 mirror rotate"></i>
            </a>
        </span>
        <nz-select style="width: 80px;margin-right: 10px" [(ngModel)]="selectFontFamily" (nzOpenChange)="FontFamily($event)">
            <nz-option
                *ngFor="let option of fontFamilyOption"
                [nzLabel]="option.label"
                [nzValue]="option">
            </nz-option>
        </nz-select>
        <nz-select style="width: 50px;" [(ngModel)]="selectFontSize"  (nzOpenChange)="FontSize($event)">
            <nz-option
                *ngFor="let option of fontSizeOption"
                [nzLabel]="option.label"
                [nzValue]="option">
            </nz-option>
        </nz-select>
        <span>
            <label [appMargin]="5" [ngStyle]="{'color': fontColor}">字体颜色</label>
            <nz-input #color style="width: 70px;" [(ngModel)]="fontColor" name="color1" [(colorPicker)]="fontColor"></nz-input>
        </span>
        <span class="editTool" [appMargin]="10">
            <a (click)="fontWeight()" title="加粗">
                <i class="icon icon-加粗">

                </i>
            </a>
            <a (click)="fontStyle()" title="倾斜">
                <i class="icon icon-倾斜">

                </i>
            </a>
            <a (click)="textDecoration()" title="下划线">
                <i class="icon icon-下划线">

                </i>
            </a>
            <!--<a [appMargin]="10" top="-4"  title="对齐">-->
                <!--<i class="icon icon-项目符号">-->

                <!--</i>-->
            <!--</a>-->
            <a (click)="textAlign('flex-start')"  title="左对齐">
                <i class="icon icon-居左">

                </i>
            </a>
            <a (click)="textAlign('center')"  title="居中">
                <i class="icon icon-居中">

                </i>
            </a>
            <a (click)="textAlign('flex-end')"  title="右对齐">
                <i class="icon icon-居右">

                </i>
            </a>
            <a (click)="verticalAlign('flex-start')"  title="居上">
                <i class="icon icon-居上"  >

                </i>
            </a>
            <a (click)="verticalAlign('center')"  title="居中">
                <i [appMargin] top="10" class="icon icon-居上">

                </i>
            </a>
            <a (click)="verticalAlign('flex-end')"  title="居下">
                <i [appMargin] top="15" class="icon icon-居上">

                </i>
            </a>
        </span>
        <span>
            <label [appMargin]="5" [ngStyle]="{'color': bgColor}">背景颜色</label>
            <nz-input style="width: 70px;" [(ngModel)]="bgColor"  name="color2" [(colorPicker)]="bgColor"></nz-input>
        </span>
    </div>
    <div nz-col [nzSpan]="2" >
        <a class="back" (click)="backTo()">
            <i class="icon icon-返回"></i>
            返回
        </a>
    </div>
</div>
